<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fdc">
    <!-- 主体部分 -->
    <main class="main f1">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg3.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 用户名 -->
        <a href="./user-details.html" class="level1">
            <div class="level11 df jcsb aic">
                <div class="level111">
                    <img src="#" alt="" class="level1111">
                    <span class="iconfont icon-vip iconfont1"></span>
                </div>
                <h3 class="level112">用户名</h3>
                <span class="iconfont icon-xiangyou1 iconfont2"></span>
            </div>
            <div class="level12">个性签名: XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
        </a>
        <!-- 打卡 -->
        <div class="level2 df jcsb">
            <div class="level21 df aic aic">
                <span class="iconfont icon-rili iconfont3"></span>
                <p class="level211">累积打卡<span class="day1"> 23 </span>天</p>
            </div>
            <div class="level22">今日打卡</div>
        </div>
        <!-- 动态 -->
        <div class="level3 df jcsb">
            <div class="level31 df aic">
                <span class="iconfont icon-dongtai iconfont4"></span>
                <p class="level311">个人动态</p>
            </div>
            <div class="level32 df aic">
                <div class="level321"><span class="level3211">10</span>条</div>
                <span class="iconfont icon-xiangyou1 iconfont2"></span>
            </div>
        </div>
        <!-- 运动数据 -->
        <div class="level4">
            <div class="level41 df jcsb aic">
                <div class="level411 df aic">
                    <span class="iconfont icon-tubiao-zhuzhuangtu iconfont5"></span>
                    <p class="level4111">运动数据</p>
                </div>
                <a href="./sport-data.html" class="level412">
                    <span class="iconfont icon-xiangyou1 iconfont2"></span>
                </a>
            </div>
            <div class="level42 df">
                <div class="level421">
                    <div class="level4211">总运动</div>
                    <div class="level4212"><span class="duration
                        ">99999</span>分钟</div>
                </div>
                <div class="level422">
                    <div class="level4221">本周消耗</div>
                    <div class="level4222"><span class="calorie">99999</span>千卡</div>
                </div>
            </div>
        </div>
        <!-- 我的徽章 -->
        <div class="level5">
            <div class="level51 df jcsb aic">
                <div class="level511 df aic">
                    <span class="iconfont icon-sharpicons_badge- iconfont6"></span>
                    <p class="level5111">我的运动徽章</p>
                </div>
                <div class="level512">
                    <span class="iconfont icon-xiangyou1 iconfont2"></span>
                </div>
            </div>
            <div class="level52 df jcsb">
                <div class="level521"></div>
                <div class="level521"></div>
                <div class="level521"></div>
            </div>
        </div>
    </main>
</body>

</html>